// Light theme for CodeMirror

// Editor styling
// Three editor instances can be styled: The main editor, the quicklook editor
// and the custom CSS editor

#editor .CodeMirror, .quicklook .body .CodeMirror, .dialog .CodeMirror {
    color:rgb(46, 56, 60);

    &.cm-s-zettlr-code {
      // Code files have this theme applied (others have cm-s-zettlr-markdown)
      font-family: @font-code;
    }

    &.cm-stex-mode, &.cm-css-mode {
      font-family: @font-code;
        .cm-comment    { color: var(--grey-2); }
        .cm-attribute  { color: var(--blue-0); }
        .cm-builtin    { color: var(--blue-0); } // Some modes use this for keywords
        .cm-string     { color: var(--green-0); }
        .cm-string-2   { color: var(--gold-selection-dark); }
        .cm-variable   { color: var(--grey-6); }
        .cm-variable-2 { color: var(--green-selection-dark); }
        .cm-keyword    { color: var(--purple-selection); }
        .cm-property   { color: var(--orange-2); }
        .cm-type       { color: var(--orange-2); }
        .cm-atom       { color: var(--green-0); }
        .cm-number     { color: var(--blue-0); }
    }

    // Now general styling for variables

    // First generic variables
    .cm-comment, .cm-fenced-code, .cm-inline-math { color: var(--grey-3); }

    .cm-highlight { background-color: yellow; color: #333; }

    .cm-fenced-code, .cm-stex-mode {
      font-family: @font-code;
        &.cm-comment    { color: var(--grey-2); }
        &.cm-attribute  { color: var(--blue-0); }
        &.cm-builtin    { color: var(--blue-0); } // Some modes use this for keywords
        &.cm-string     { color: var(--green-0); }
        &.cm-string-2   { color: var(--gold-selection-dark); }
        &.cm-variable   { color: var(--grey-6); }
        &.cm-variable-2 { color: var(--green-selection-dark); }
        &.cm-keyword    { color: var(--purple-selection-dark); }
        &.cm-property   { color: var(--orange-2); }
        &.cm-type       { color: var(--orange-2); }
        &.cm-atom       { color: var(--green-0); }
        &.cm-number     { color: var(--blue-0); }
        &.cm-positive   { color: var(--green-0); }
        &.cm-negative   { color: var(--red-0); }
    }

    // HTML tags
    .cm-tag       { font-family: @font-code; color: var(--orange-2); }
    .cm-attribute { font-family: @font-code; color: var(--blue-0); }
    .cm-string    { font-family: @font-code; color: var(--green-0); }
    .cm-bracket   { font-family: @font-code; color: var(--grey-5); }

    // TYPOGRAPHY
    .cm-formatting-header-1, .cm-formatting-header-2, .cm-formatting-header-3,
    .cm-formatting-header-4, .cm-formatting-header-5, .cm-formatting-header-6,
    .cm-url { color: var(--c-primary); }

    .size-header-1, .size-header-2, .size-header-3,
    .size-header-4, .size-header-5, .size-header-6 { font-weight: bold; }

    // Style the code block line wrapper classes
    .code-block-line { background-color: #eee; }

    /* LISTS */
    .cm-formatting-list-ul,
    .cm-formatting-list-ol { color: var(--c-primary); }

    /* TYPOGRAPHY */
    .cm-quote, .cm-link, .cm-strong, .cm-em { color:var(--c-primary); }
    .cm-spell-error {
      text-decoration: underline;
      text-decoration-color: var(--orange-2);
      text-decoration-style: dotted;
      // Prevent skipping of low-baseline chars to prevent strange artefacts
      text-decoration-skip-ink: none;
    }
    .cm-zkn-tag,
    .cm-zkn-id,
    .cm-zkn-link,
    .cm-zkn-link-formatting,
    .cm-footnote-formatting {
      color:var(--c-primary);
    }

    .cm-footnote-formatting {
      font-weight: bold;
    }

    // cma = code-mirror-anchor
    .cma { color: var(--c-primary); font-weight: inherit; }

    // citations
    .citeproc-citation {
      background-color: var(--grey-0);
      &.error { color: var(--red-2); }
    }

    // Mermaid charts
    .mermaid-chart {
      // THEMING
      // For now, a simple background
      // for easy recognition
      svg {
        background-color: var(--grey-4);
        border-radius: 5px;
      }
      // .edgePaths {
      //   stroke: #333;
      // }

      // .nodes {
      //   rect {
      //     fill: #fff;
      //     stroke: #333;
      //   }
      //   color: #333;
      // }

      cursor: default; // No text cursor
      &.error {
        font-family: @font-code; // For the error messages
        color: var(--fg-error);
      }
    }

    .cm-escape-char { color:var(--grey-3); }

    // Horizontal ruler
    .cm-hr {
      color: var(--c-primary);
      font-family: @font-code;
      font-weight: bold;
    }

    // Add a cool indicator to the front matter -- overwrites the .cm-hr style above
    .cm-yaml-frontmatter-start {
      color: inherit;

      &::after {
        content: "YAML Frontmatter";
        display: inline-block;
        margin-left: 10px;
        padding: 0px 5px;
        font-size: 60%;
        font-weight: normal;
        vertical-align: middle;
        color: rgb(180, 180, 180);
        background-color: rgb(240, 240, 240);
      }
    }

    .CodeMirror-foldmarker {
      background-color: var(--grey-0);
      color: var(--grey-3);

      &:hover { background-color: var(--grey-1); }
    }

    .CodeMirror-guttermarker-subtle { color: #dadada; }

    // Heading tags
    .heading-tag {
      color: var(--grey-1);
      transition: 0.2s all ease;
      &:hover {
        color: var(--grey-3);
        background-color: var(--grey-1);
      }
    }

    // The active line when in typewriter mode
    .CodeMirror-linebackground.typewriter-active-line {
      border-top: 2px solid @grey-3;
      border-bottom: 2px solid @grey-3;
      background-color: @grey-1;
      margin-top: -2px;
      margin-bottom: -2px;
    }
}

.CodeMirror-focused .CodeMirror-selected { background-color: var(--selection-light); }
.CodeMirror .CodeMirror-selected { background-color: var(--selection-light); }
.CodeMirror-cursor { background: var(--c-primary); }

// Hint related stuff. Hints mustn't be scoped by .CodeMirror as they are
// attached to document.body, not the editor
.CodeMirror-hints {
  -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  border-radius: @border-radius;
  border: 1px solid var(--grey-1);

  background: white;
  font-size: 90%;
  li.CodeMirror-hint {
    color: var(--grey-7);

    &:hover { background-color: var(--grey-0); }
  }

  li.CodeMirror-hint-active {
    background: var(--c-primary);
    color: var(--grey-0);

    &:hover { background-color: var(--c-primary-shade); }
  }

  // Special tags
  .cm-hint-colour {
    color: var(--grey-3);
    background-color: var(--grey-2);
  }
}

// Custom styling for the various editors across the app
// -----------------------------------------------------------------------------
#editor .CodeMirror {
  // Comments in the main editor should have a background-color
  .cm-comment:not(.cm-formatting):not(.cm-fenced-code)  {
    background-color: var(--grey-0);
    &:first-child {
      border-top-left-radius: @border-radius;
      border-bottom-left-radius: @border-radius;
      padding-left: 5px;
    }
    &:last-child {
      border-top-right-radius: @border-radius;
      border-bottom-right-radius: @border-radius;
      padding-right: 5px;
    }
  }

  // We need to make sure inline elements (directly after & before formatting
  // elements) also have this nice padding and border.
  .cm-formatting + .cm-comment:not(.cm-formatting):not(.cm-fenced-code) {
    border-top-left-radius: @border-radius;
    border-bottom-left-radius: @border-radius;
    padding-left: 5px;
  }
  .cm-formatting  ~ .cm-comment:not(.cm-formatting):not(.cm-fenced-code){
    border-top-right-radius: @border-radius;
    border-bottom-right-radius: @border-radius;
    padding-right: 5px;
  }
}
